/**
 * Created by user on 2018/11/8.
 */
import React from "react";
import { connect } from "dva";
import { Layout } from "antd";
import { Switch, Route } from 'dva/router'
import DocumentTitle from "react-document-title";
import GlobalHeader from '@/components/GlobalHeader';
import SiderMenu from '@/components/MySiderMenu'
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
import Page from "@/components/Page";
import logo from '../assets/logo.jpg';
import { getMenuData } from '@/custom/menu'

const {Content, Header, Footer} = Layout;

const query = {
  'screen-xs': {
    maxWidth: 575,
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767,
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991,
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199,
  },
  'screen-xl': {
    minWidth: 1200,
    maxWidth: 1599,
  },
  'screen-xxl': {
    minWidth: 1600,
  }
}

@connect(state => {
  return ({
    currentUser: state.global.user,
    collapsed: state.global.collapsed
  })
})
class BaseLayout extends React.Component {
  componentDidMount() {
    const {dispatch} = this.props
    dispatch({type: 'global/getCurrentUser'})
  }
  handleMenuCollapse = (collapsed) => {
    const { dispatch } = this.props
    dispatch({
      type: 'global/toggleCollapsed',
      payload: { collapsed }
    })
  }
  handleMenuClick() {

  }
  render() {
    console.log('this.props', this.props)
    const { currentUser, location, collapsed } = this.props
    const layout = (
      <Layout>
        <SiderMenu
          logo={logo}
          menuData={getMenuData()}
          collapsed={collapsed}
          location={location}
          onCollapse={this.handleMenuCollapse}
        />
        <Layout>
          <Header style={{ padding: 0 }}>
            <GlobalHeader
              logo={logo}
              currentUser={currentUser}
              collapsed={collapsed}
              onCollapse={this.handleMenuCollapse}
              onMenuClick={this.handleMenuClick}
            />
          </Header>
          <Content style={{ margin: '24px 24px 0', height: '100%' }}>

          </Content>
        </Layout>


      </Layout>
    )
    return (
      <Page loading={!currentUser}>
        <DocumentTitle title="test">
          <ContainerQuery query={query}>
            {params => <div className={classNames(params)}>{layout}</div>}
          </ContainerQuery>
        </DocumentTitle>
      </Page>
    )
  }
}

export default BaseLayout
